var abMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessorybutton');
var ctMaterialType = new i18nMessage('../../servlet/CodeTableServlet?name=CtMaterialType');
var ctYesno = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
var ctBrand = new i18nMessage('../../servlet/CodeTableServlet?name=CtBrand');
var ctShape = new i18nMessage('../../servlet/CodeTableServlet?name=CtShape');
var ctSupplyType = new i18nMessage('../../servlet/CodeTableServlet?name=CtSupplyType');
var buttonStore;
var buttonGrid;
var buttonWindow;
var selectButtonCallback;
var selectedButton;
function locateButton(rowIndex){
	selectedButton = buttonStore.getAt(rowIndex).data;
}
var selectButton = function(selectCallback){
	selectButtonCallback = selectCallback;
    if (!buttonWindow) {
        buttonWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 900,
            height: 605,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'buttonPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="buttonDiv"></div>'
            }]
        });
    }
    buttonWindow.show();
    
    if (buttonGrid){
		buttonStore.reload();
		return;
	}
    buttonStore = new Ext.data.Store({
                   url: '../../servlet/BiAccessoryButtonServlet?action=4',
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'reference', 'measure','ctShape', 'ctMaterialType', 'ctSupplyType','ctSupplyTypeCode', 'comment', 'photo1Name','photo2Name','photo3Name', 'holeQuantity','customerReference','factoryReference', 'customerColor', 'factoryColor', {
					 	name: 'biFranceCustomer.name',
					 	mapping: 'customerName'
					 }, {
					 	name: 'biFranceCustomer.department',
					 	mapping: 'customerDepartment'
					 }, {
					 	name: 'biFactory.nameCN',
					 	mapping: 'factoryNameCN'
					 }, {
					 	name: 'biFactory.nameEN',
					 	mapping: 'factoryNameEN'
					 },'addressFactory', 'id']),
                    
                    remoteSort: true
            });
    
    buttonStore.setDefaultSort('id', 'desc');
    
    function renderSelectButton(value, p, record, rowIndex){
        return String.format('<a href="javascript:locateButton({15}); selectButtonCallback(\'{0}\', \'{1}\', \'{2}\',\'{3}\', \'{4}\', \'{5}\',\'{6}\', \'{7}\', \'{8}\', \'{9}\', \'{10}\', \'{11}\', \'{12}\', \'{13}\', \'{14}\');buttonWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>', 
        record.data.id, 
        record.data.reference, 
        record.data['biFranceCustomer.name'],
        record.data['biFranceCustomer.department'], 
        record.data.customerReference,
        record.data.customerColor,
        record.data['biFactory.nameCN'],
        record.data.factoryReference,
        record.data.factoryColor, 
        record.data.addressFactory, 
        record.data.photo1Name,
        record.data.photo2Name, 
        record.data.photo3Name,
        record.data.isSpecialCode,
        record.data['biFactory.nameEN'],
        rowIndex);
    }
	
	var buttonFilters = new Ext.grid.GridFilters({
					   filters:[
					    {type: 'string',  dataIndex: 'reference'},{
						      type: 'string',  
						      dataIndex: 'measure'
					    },{
						      type: 'list',  
						      dataIndex: 'ctMaterialType', 
						      options: ctMaterialType.getCtArray()
					    },{
						      type: 'list',  
						      dataIndex: 'ctShape', 
						      options: ctShape.getCtArray()
					    },{
						      type: 'list',  
						      dataIndex: 'ctSupplyType', 
						      options: ctSupplyType.getCtArray()
					    },
						{type: 'string', dataIndex: 'biFranceCustomer.name'},
						{type: 'string', dataIndex: 'biFranceCustomer.department'},
						{type: 'string', dataIndex: 'biFactory.nameCN'},
						{type: 'string', dataIndex: 'biFactory.nameEN'},
						{type: 'string', dataIndex: 'customerColor'},
						{type: 'string', dataIndex: 'factoryColor'},
						{type: 'string', dataIndex: 'customerReference'},
						{type: 'string', dataIndex: 'factoryReference'}
				]});
	var buttonExpander = new Ext.grid.RowExpander({
        tpl : new Ext.XTemplate(
			        	'<p><b>' + message.get('message.edit.materialtype') + ':</b>&nbsp;&nbsp;{ctMaterialType}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.shape') + ':</b>&nbsp;&nbsp;{ctShape}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.hole') + ':</b>&nbsp;&nbsp;{holeQuantity}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.measure') + ':</b>&nbsp;&nbsp;{measure}</p><br/> ',
						'<p><img src="../../_temp/{photo1Name}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo2Name}" width="150px"/>',
						'&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo3Name}" width="150px"/></p><br/>',
						'<br/><br/><p><b>' + message.get('message.edit.comment') + ':</b> {comment}</p><br/>'
			        )
	});			
    // create the grid
    buttonGrid = new Ext.grid.GridPanel({
        title: abMessage.get('ui.accessorybutton.listtitle'),
        store: buttonStore,
        stripeRows: true,
        plugins: [buttonFilters,buttonExpander],
        height: 560,
        columns: [buttonExpander,{
                header: message.get('message.list.id'),
                width: 50,
                dataIndex: 'index',
                sortable: false
            }, {
                header: message.get('message.edit.reference'),
                dataIndex: 'reference',
                sortable: true
            },{
                header: fcMessage.get('ui.francecustomer.name'),
                dataIndex: 'biFranceCustomer.name',
                sortable: true
            },{
                header: fcMessage.get('ui.francecustomer.department'),
                dataIndex: 'biFranceCustomer.department',
                sortable: true
            }, {
                header: message.get('message.edit.customerreference'),
                dataIndex: 'customerReference',
                sortable: true
            }, {
                header: colorMessage.get('ui.pantonecolor.customercolor'),
                dataIndex: 'customerColor',
                sortable: true
            },{
                header: fMessage.get('ui.factory.name') + '(CN)',
                dataIndex: 'biFactory.nameCN',
                sortable: true
            },{
                header: fMessage.get('ui.factory.name') + '(FR/EN)',
                dataIndex: 'biFactory.nameEN',
                sortable: true
            }, {
                header: message.get('message.edit.factoryreference'),
                dataIndex: 'factoryReference',
                sortable: true
            }, {
                header: colorMessage.get('ui.pantonecolor.factorycolor'),
                dataIndex: 'factoryColor',
                sortable: true
            },{
                header: message.get('message.edit.buyer'),
                dataIndex: 'ctSupplyType',
                sortable: true
            }, {
            header: message.get('message.list.select'),
            width: 30,
            dataIndex: 'id',
            sortable: false,
            renderer: renderSelectButton
        }],
        viewConfig: {
            forceFit: true
        },
        loadMask: true,
        renderTo: 'buttonDiv',
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: buttonStore,
            displayInfo: true
        })
    });
    
    var startPage = getPrarmeterValue(window.location, 'startPage');
    var start;
    if (startPage == null || startPage == '') {
        start = 0;
    }
    else {
        start = (startPage - 1) * 20;
    }
    buttonStore.load({
        params: {
            start: start,
            limit: 20
        }
    });
}

function renderSample(value, p, record){
		if(value == '')
			return '';
		else
           return String.format('<div style="background-color: #{0};width: 20px;">&nbsp;</div>', value);
    }

